<template>
  <div class="lottery-ball">
    <div 
      class="ball ball-unselected hover-style"
      :class="numberObj.selected ? 'ball-selected' : ''"
    >
      {{numberObj.number}}
    </div>
    <div class="parameter">
      {{numberObj.parameter[activeSwitchIndex].number}}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    numberObj: {
      type: Object, 
      default: function() {
        return {
          id: 1,
          number: 1,
          selected: false,
          parameter: [
            {
              type: 'missing',
              number: 9.75,
              context: '遗漏'
            },
            {
              type: 'unpopular',
              number: 10,
              context: '冷门'
            }
          ]
        }
      }
    },
    activeSwitchIndex: {
      default: 0
    }
  },
  methods: {
    handleBallSelect(sIndex) {
      this.$emit('click', sIndex)
    }
  }
}
</script>

<style lang="stylus">
@import '~@/assets/styles/variables.styl'
  .lottery-ball
    text-align center 
    .ball
      text-align center
      width 48px
      height 48px 
      line-height 48px
      box-sizing border-box
      border-radius 50%
      font-size 18px
    .parameter 
      margin-top 7px
    .ball:hover
      border-color #e02828;
        
</style>